<#import "/macro.ftl" as m>
<@m.page_header title='APP启动画面' />
<div id="page-content-wrapper">
    <div id="page-title">
        <h3>APP启动画面</h3>
    </div>
    <div id="page-content">
    	<div class="row">
    		<div class="col-md-12 mrg20A">
    			<label class="font-blue font-size-35">iOS</label>
    		</div>
    	</div>
    	<form id="form-ios-setdisplaytime" action="/splashscreens/setdisplaytime" method="post">
    		<input name="os" value="iOS" type="hidden">
    		<div class="row">
    			<div class="col-md-4">
    				<div class="form-row">
		    			<div class="form-label col-md-4">
		    				<label id="startTime">开始时间：</label>
		    			</div>
		    			<div class="form-input col-md-6">
		    				<input id="startTime" name="startTime" value="<#if iOSStartTime??>${iOSStartTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" data-required="true" onClick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})" type="text">
		    			</div>
		    		</div>
    			</div>
    			<div class="col-md-4">
    				<div class="form-row">
		    			<div class="form-label col-md-4">
		    				<label id="endTime">结束时间：</label>
		    			</div>
		    			<div class="form-input col-md-6">
		    				<input id="endTime" name="endTime" value="<#if iOSEndTime??>${iOSEndTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" data-required="true" onClick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})" type="text">
		    			</div>
		    		</div>
    			</div>
    			<div class="col-md-4">
    				<a href="javascript:;" class="btn medium primary-bg" onclick="submit('form-ios-setdisplaytime');">
	                    <span class="button-content">设置iOS显示时间</span>
	                </a>
    			</div>
    		</div>
    	</form>
    	<div class="row mrg10B">
    		<div class="col-md-3 text-center">
    			<label class="font-size-15">3.5英寸 分辨率 ：640x960</label>
    		</div>
    		<div class="col-md-3 text-center">
    			<label class="font-size-15">4.0英寸 分辨率 ：640x1136</label>
    		</div>
    		<div class="col-md-3 text-center">
    			<label class="font-size-15">4.7英寸 分辨率 ：750x1334</label>
    		</div>
    		<div class="col-md-3 text-center">
    			<label class="font-size-15">5.5英寸 分辨率 ：1242x2208</label>
    		</div>
    	</div>
    	<div class="row">
    		<div class="col-md-3 text-center">
    			<img id="image-iOS-640-960-0" width="220" heigth="300" src="<#if iOS_640_960_0??>${iOS_640_960_0.url}<#else>/assets/images/splashscreen.png</#if>" onclick="$('#image-input-iOS-640-960-0').trigger('click');"></img>
    			<input id="image-input-iOS-640-960-0" type="file" name="images" multiple="" class="hide">
    			<form id="form-iOS-640-960-0">
    				<input id="os" name="os" value="iOS" type="hidden">
    				<input id="width" name="width" value="640" type="hidden">
    				<input id="height" name="height" value="960" type="hidden">
    				<input id="dpi" name="dpi" value="0" type="hidden">
    				<input id="fileName" name="fileName" value="" type="hidden">
    				<input id="url" name="url" value="" type="hidden">
    				<input id="startTime" name="startTime" value="<#if iOSStartTime??>${iOSStartTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" type="hidden">
    				<input id="endTime" name="endTime" value="<#if iOSStartTime??>${iOSEndTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" type="hidden">
    			</form>
    		</div>
    		<div class="col-md-3 text-center">
    			<img id="image-iOS-640-1136-0" width="220" heigth="300" src="<#if iOS_640_1136_0??>${iOS_640_1136_0.url}<#else>/assets/images/splashscreen.png</#if>" onclick="$('#image-input-iOS-640-1136-0').trigger('click');"></img>
    			<input id="image-input-iOS-640-1136-0" type="file" name="images" multiple="" class="hide">
    			<form id="form-iOS-640-1136-0">
    				<input id="os" name="os" value="iOS" type="hidden">
    				<input id="width" name="width" value="640" type="hidden">
    				<input id="height" name="height" value="1136" type="hidden">
    				<input id="dpi" name="dpi" value="0" type="hidden">
    				<input id="fileName" name="fileName" value="" type="hidden">
    				<input id="url" name="url" value="" type="hidden">
    				<input id="startTime" name="startTime" value="<#if iOSStartTime??>${iOSStartTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" type="hidden">
    				<input id="endTime" name="endTime" value="<#if iOSStartTime??>${iOSEndTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" type="hidden">
    			</form>
    		</div>
    		<div class="col-md-3 text-center">
    			<img id="image-iOS-750-1334-0" width="220" heigth="300" src="<#if iOS_750_1334_0??>${iOS_750_1334_0.url}<#else>/assets/images/splashscreen.png</#if>" onclick="$('#image-input-iOS-750-1334-0').trigger('click');"></img>
    			<input id="image-input-iOS-750-1334-0" type="file" name="images" multiple="" class="hide">
    			<form id="form-iOS-750-1334-0">
    				<input id="os" name="os" value="iOS" type="hidden">
    				<input id="width" name="width" value="750" type="hidden">
    				<input id="height" name="height" value="1334" type="hidden">
    				<input id="dpi" name="dpi" value="0" type="hidden">
    				<input id="fileName" name="fileName" value="" type="hidden">
    				<input id="url" name="url" value="" type="hidden">
    				<input id="startTime" name="startTime" value="<#if iOSStartTime??>${iOSStartTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" type="hidden">
    				<input id="endTime" name="endTime" value="<#if iOSStartTime??>${iOSEndTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" type="hidden">
    			</form>
    		</div>
    		<div class="col-md-3 text-center">
    			<img id="image-iOS-1242-2208-0" width="220" heigth="300" src="<#if iOS_1242_2208_0??>${iOS_1242_2208_0.url}<#else>/assets/images/splashscreen.png</#if>" onclick="$('#image-input-iOS-1242-2208-0').trigger('click');"></img>
    			<input id="image-input-iOS-1242-2208-0" type="file" name="images" multiple="" class="hide">
    			<form id="form-iOS-1242-2208-0">
    				<input id="os" name="os" value="iOS" type="hidden">
    				<input id="width" name="width" value="1242" type="hidden">
    				<input id="height" name="height" value="2208" type="hidden">
    				<input id="dpi" name="dpi" value="0" type="hidden">
    				<input id="fileName" name="fileName" value="" type="hidden">
    				<input id="url" name="url" value="" type="hidden">
    				<input id="startTime" name="startTime" value="<#if iOSStartTime??>${iOSStartTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" type="hidden">
    				<input id="endTime" name="endTime" value="<#if iOSStartTime??>${iOSEndTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" type="hidden">
    			</form>
    		</div>
    	</div>
    	<div class="row">
    		<div class="col-md-12 mrg20A">
    			<label class="font-blue font-size-35">Android</label>
    		</div>
    	</div>
    	<form id="form-android-setdisplaytime" action="/splashscreens/setdisplaytime" method="post">
    		<input name="os" value="Android" type="hidden">
    		<div class="row">
    			<div class="col-md-4">
    				<div class="form-row">
		    			<div class="form-label col-md-4">
		    				<label id="startTime">开始时间：</label>
		    			</div>
		    			<div class="form-input col-md-6">
		    				<input id="startTime" name="startTime" value="<#if androidStartTime??>${androidStartTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" data-required="true" onClick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})" type="text">
		    			</div>
		    		</div>
    			</div>
    			<div class="col-md-4">
    				<div class="form-row">
		    			<div class="form-label col-md-4">
		    				<label id="endTime">结束时间：</label>
		    			</div>
		    			<div class="form-input col-md-6">
		    				<input id="endTime" name="endTime" value="<#if androidEndTime??>${androidEndTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" data-required="true" onClick="WdatePicker({isShowWeek:true,dateFmt:'yyyy-MM-dd HH:mm:ss'})" type="text">
		    			</div>
		    		</div>
    			</div>
    			<div class="col-md-4">
    				<a href="javascript:;" class="btn medium primary-bg" onclick="submit('form-android-setdisplaytime');">
	                    <span class="button-content">设置Android显示时间</span>
	                </a>
    			</div>
    		</div>
    	</form>
    	<div class="row mrg10B">
    		<div class="col-md-3 text-center">
    			<label class="font-size-15">DPI:240 分辨率 ：480x800</label>
    		</div>
    		<div class="col-md-3 text-center">
    			<label class="font-size-15">DPI:320 分辨率 ：720x1280</label>
    		</div>
    		<div class="col-md-3 text-center">
    			<label class="font-size-15">DPI:480 分辨率 ：1080x1920</label>
    		</div>
    	</div>
    	<div class="row">
    		<div class="col-md-3 text-center">
    			<img id="image-Android-480-800-240" width="220" heigth="300" src="<#if Android_480_800_240??>${Android_480_800_240.url}<#else>/assets/images/splashscreen.png</#if>" onclick="$('#image-input-Android-480-800-240').trigger('click');"></img>
    			<input id="image-input-Android-480-800-240" type="file" name="images" multiple="" class="hide">
    			<form id="form-Android-480-800-240">
    				<input id="os" name="os" value="Android" type="hidden">
    				<input id="width" name="width" value="480" type="hidden">
    				<input id="height" name="height" value="800" type="hidden">
    				<input id="dpi" name="dpi" value="240" type="hidden">
    				<input id="fileName" name="fileName" value="" type="hidden">
    				<input id="url" name="url" value="" type="hidden">
    				<input id="startTime" name="startTime" value="<#if androidStartTime??>${androidStartTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" type="hidden">
    				<input id="endTime" name="endTime" value="<#if androidStartTime??>${androidEndTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" type="hidden">
    			</form>
    		</div>
    		<div class="col-md-3 text-center">
    			<img id="image-Android-720-1280-320" width="220" heigth="300" src="<#if Android_720_1280_320??>${Android_720_1280_320.url}<#else>/assets/images/splashscreen.png</#if>" onclick="$('#image-input-Android-720-1280-320').trigger('click');"></img>
    			<input id="image-input-Android-720-1280-320" type="file" name="images" multiple="" class="hide">
    			<form id="form-Android-720-1280-320">
    				<input id="os" name="os" value="Android" type="hidden">
    				<input id="width" name="width" value="720" type="hidden">
    				<input id="height" name="height" value="1280" type="hidden">
    				<input id="dpi" name="dpi" value="320" type="hidden">
    				<input id="fileName" name="fileName" value="" type="hidden">
    				<input id="url" name="url" value="" type="hidden">
    				<input id="startTime" name="startTime" value="<#if androidStartTime??>${androidStartTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" type="hidden">
    				<input id="endTime" name="endTime" value="<#if androidStartTime??>${androidEndTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" type="hidden">
    			</form>
    		</div>
    		<div class="col-md-3 text-center">
    			<img id="image-Android-1080-1920-480" width="220" heigth="300" src="<#if Android_1080_1920_480??>${Android_1080_1920_480.url}<#else>/assets/images/splashscreen.png</#if>" onclick="$('#image-input-Android-1080-1920-480').trigger('click');"></img>
    			<input id="image-input-Android-1080-1920-480" type="file" name="images" multiple="" class="hide">
    			<form id="form-Android-1080-1920-480">
    				<input id="os" name="os" value="Android" type="hidden">
    				<input id="width" name="width" value="1080" type="hidden">
    				<input id="height" name="height" value="1920" type="hidden">
    				<input id="dpi" name="dpi" value="480" type="hidden">
    				<input id="fileName" name="fileName" value="" type="hidden">
    				<input id="url" name="url" value="" type="hidden">
    				<input id="startTime" name="startTime" value="<#if androidStartTime??>${androidStartTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" type="hidden">
    				<input id="endTime" name="endTime" value="<#if androidStartTime??>${androidEndTime?string('yyyy-MM-dd HH:mm:ss')}</#if>" type="hidden">
    			</form>
    		</div>
    	</div>
    </div>
</div>

<script type="text/javascript" src="/assets/js/md5.js"></script>
<script type="text/javascript" src="/assets/js/uuid.core.js"></script>
<script src="/assets/multiupload/jquery.iframe-transport.js"></script>
<script src="/assets/multiupload/jquery.fileupload.js"></script>

<script>

//上传图片到又拍云
function uploadToUpyun(file, success) {

    $.get("/upyun/bucketapi", function (data) {

        var config = {
            api: 'http://v0.api.upyun.com/',
            bucket: data.bucket,
            // 空间的表单 API
            form_api: data.formId
        };
        
        if (!file) {
            console.log('no file is selected');
            return;
        }
        
        var date = new Date();
        var dir = "upload/images/splashscreens/" + date.getFullYear() + "/" + (date.getMonth() + 1) + "/";
        var fileName = UUID.generate() + '.png';
        
        // 计算 policy 和 signature 所需的参数
        // 详情见： http://docs.upyun.com/api/form_api/#表单API接口简介
        var options = {
            bucket: config.bucket,
            expiration: Math.floor(new Date().getTime() / 1000) + 86400,
            'save-key': dir + fileName
        };

        var policy = window.btoa(JSON.stringify(options));
        var signature = CryptoJS.MD5(policy + '&' + config.form_api);

        var dataform = new FormData();
        dataform.append('policy', policy);
        dataform.append('signature', signature);
        dataform.append('file', file);

        var request = new XMLHttpRequest();
        request.open('POST', config.api + options.bucket);

        request.onload = function (e) {
        	
            var jsonResponse = JSON.parse(request.response);
            if (jsonResponse.code == "200") {
                var uploadUrl = data.returnUrl + '/'+ dir + fileName;
                if(success){
                	success(uploadUrl);
                }
				
                $.jGrowl("上传又拍云成功", {sticky: !1, position: "top-right", theme: "bg-green"});
            } else {
                $.jGrowl("上传又拍云失败，错误代码" + jsonResponse.code, {sticky: !1, position: "top-right", theme: "bg-green"});
            }
        };

        request.send(dataform);
    });
}

// 提交表单
function submit(formId){
	var valid = $('#' + formId).parsley( 'validate' );
	if(!valid){
		return;
	}
	
	$('#' + formId).submit();
}

$(function () {

	// iOS
    $('#image-input-iOS-640-960-0').fileupload({
        dataType: 'json',
        add: function (e, data) {
            uploadToUpyun(data.files[0], function(url){
            	setSplashscreen('iOS-640-960-0', url);
            });
        }
    });
    
    $('#image-input-iOS-640-1136-0').fileupload({
        dataType: 'json',
        add: function (e, data) {
            uploadToUpyun(data.files[0], function(url){
            	setSplashscreen('iOS-640-1136-0', url);
            });
        }
    });
    
    $('#image-input-iOS-750-1334-0').fileupload({
        dataType: 'json',
        add: function (e, data) {
            uploadToUpyun(data.files[0], function(url){
            	setSplashscreen('iOS-750-1334-0', url);
            });
        }
    });
    
    $('#image-input-iOS-1242-2208-0').fileupload({
        dataType: 'json',
        add: function (e, data) {
            uploadToUpyun(data.files[0], function(url){
            	setSplashscreen('iOS-1242-2208-0', url);
            });
        }
    });
    
    // Android
    $('#image-input-Android-480-800-240').fileupload({
        dataType: 'json',
        add: function (e, data) {
            uploadToUpyun(data.files[0], function(url){
            	setSplashscreen('Android-480-800-240', url);
            });
        }
    });
    
    $('#image-input-Android-720-1280-320').fileupload({
        dataType: 'json',
        add: function (e, data) {
            uploadToUpyun(data.files[0], function(url){
            	setSplashscreen('Android-720-1280-320', url);
            });
        }
    });
    
    $('#image-input-Android-1080-1920-480').fileupload({
        dataType: 'json',
        add: function (e, data) {
            uploadToUpyun(data.files[0], function(url){
            	setSplashscreen('Android-1080-1920-480', url);
            });
        }
    });
});

// 设置启动画面
function setSplashscreen(id, url){

	var form = $( '#form-' + id );
	form.find('input[id=url]').val(url);
	
	$.post( '/splashscreens/set', form.serialize() )
     .done(function(data){
     	if(data["status"] == "success"){
     		$('#image-' + id).attr('src', url);
     		$.jGrowl("设置启动画面成功", {sticky:!1,position:"top-right",theme:"bg-green"});
     	}else{
     		$.jGrowl(data["message"], {sticky:!1,position:"top-right",theme:"bg-red"});
     	}
     })
     .fail(function(){
     	$.jGrowl("设置启动画面失败", {sticky:!1,position:"top-right",theme:"bg-red"});
     });
}
    
</script>